<template>
  <div class="from">
    <div class="title">
      {{$t('ImageInfo_Image')}}
<!--      镜像信息-->
    </div>
    <ul class="margin20">
      <li>
        <div class="head">{{$t('ImageInfo_ID')}}</div>
<!--        <div class="head">ID</div>-->
        <div class="body" :title="Image.Id">{{ Image.Id }}</div>
      </li>
      <li>
        <div class="head">{{$t('ImageInfo_Size')}}</div>
<!--        <div class="head">大小</div>-->
        <div class="body">{{ Math.round(Image.Size / 1024 / 1024) + 'M' }}</div>
      </li>
      <li>
        <div class="head">{{$t('ImageInfo_CreateTime')}}</div>
        <div class="body">{{ Image.Created }}</div>
      </li>
      <li>
        <div class="head">{{$t('ImageInfo_build')}}</div>
        <div class="body">Docker {{ Image.DockerVersion }} on {{ Image.Os }} ，{{ Image.Architecture }}</div>
      </li>
    </ul>
    <el-button @click="exportImage" title="功能待完善" size="small" style="background: #067FB5; color: #fff;" icon="el-icon-upload2">{{$t('ImageInfo_ExportImage')}}</el-button>
    <el-button @click="delImage" size="small" type="danger" icon="el-icon-delete">{{$t('ImageInfo_DeleteImage')}}</el-button>
  </div>
</template>

<script>
import post from '@/utils/post'
import http from '@/utils/http'
export default {
  props: ['Image'],
  methods: {
    // 导出镜像
    exportImage () {
      // console.log(this.Image)
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      http({
        url: '/imagesave',
        method: 'POST',
        timeout: 60000000000,
        responseType: 'blob',
        data: {
          image: this.Image.RepoTags[0]
        }
      }).then(res => {
        this.loading.close()
        if (res.status === 200) {
          const blob = new Blob([res.data], { type: 'application/x-tar' })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = 'image.tar' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放blob对象
        } else {
          this.$message({
            showClose: true,
            message: res.Msg,
            type: 'error'
          })
        }
      }).catch((err) => {
        return err
      })
    },
    // 删除镜像
    delImage () {
      if (!confirm('确认删除？？')) {
        return
      }
      const docker = `curl --unix-socket /var/run/docker.sock -s -X DELETE "http:/v1.40/images/${this.Image.Id}?force=true"` // 删除镜像
      post({ docker }, res => {
        if (res.message) {
          return this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message: '删除成功！',
          type: 'success'
        })
        this.$router.go(-1)
      }, this)
    }
  }
}
</script>

<style lang="scss" scoped>
ul{
  margin-bottom: 20px;
  li{
    display: flex;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #333;
    .head{
      flex-shrink: 0;
      width: 125px;
      margin-right: 30px;
      text-align: center;
      font-size: 16px;
      color: #067FB5;
      border-radius: 5px;
      background: #fff;
      border: 1px solid #067FB5;
    }
    &:nth-child(2n-1){
      background: #fff;
      .head:nth-child(2n-1){
        background: #F7FCFF;
      }
    }
    .body{
      width: 100%;
      overflow: hidden; //超出部分隐藏
      text-overflow: ellipsis; //超出部分显示...
      white-space: nowrap; //文本强制一行显示
    }
  }
}
.from{
  margin-top: 30px;
}
</style>
